<template>
  <view class="page-content">
    <f-navbar title="入库管理" :navbarType="1" :isShowLeft="false">
		<view class="margin-right-xs" @click="goLink(`./addWarehousing`)" slot="right" v-if="checkPermi(['warehousing:page:add'])">
			<u-icon name="plus" size="30rpx" bold color="#138E57"></u-icon>
		</view>
	</f-navbar>
    <view
      style="display: flex; justify-content: center; background-color: #fff"
    >
    </view>

    <view class="search-block flex align-center">
      <view class="flex-sub search-input flex align-center" v-if="showSearch" >
        <u-input
          border="none"
          v-model="listParams.receiptDocNo"
          maxlength="20"
          fontSize="24rpx"
          placeholder="搜索"
          placeholderStyle="font-size: 24rpx;color: #CCCCCC;"
          confirmType="search"
          @confirm="searchList"
		      :clearable="true"  @clear="searchClear"
        >
          <template slot="prefix">
            <u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
          </template>
        </u-input>
      </view>
      <view
        class="flex-sub search-input flex align-center justify-center"
        @click="switchSearch(true)"
        v-else
      >
        <u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
        <text class="margin-left-xs">搜索</text>
      </view>
      <image
        v-if="checkPermi(['warehousing:page:filter'])"
        class="screen-icon"
        src="@/static/images/common/screen_icon.png"
        @click="showScreenModal"
      ></image>
    </view>
	
	<!-- <view class=""  @click="goLink(`./addWarehousing`)">
		新增
	</view> -->
    <view class="page-content-main">
      <scrollList
        :list="list"
        :loadComplete="loadComplete"
        @pullUpLoad="pullUpLoad"
        ref="scrollList"
      >
        <view class="order-list">
          <view
            v-for="item of list"
            :key="item.id"
            class="item-info"
          >
            <view class="item-title flex-ac flex-jb l-border-bottom">
              <view  class="flex-sub text-cut text-cut1">入库单号：{{ item.receiptDocNo }}</view>
              <view>{{getDictionaryName(settlementStatusOptions,item.errorStatus)}}</view>
            </view>

            <view class="form l-border-bottom">
              <view class="form-type">
                <view>入库{{item.receiptLocationName}}</view>
              </view>
              <view class="form-item">
                <view>入库油品：</view>
                <view>{{ item.oilName }}</view>
              </view>
              <view class="form-item" v-if="item.categoryName">
                <view>油脂种类：</view>
                <view>{{ item.categoryName }}</view>
              </view>
              <view class="form-item">
                <view>入库重量：</view>
                <view>{{ item.quantity  || '0'}}kg</view>
              </view>
			        <view class="form-item">
			          <view>入库人：</view>
			          <view>{{ item.createName || userInfo.nickName }}</view>
			        </view>
              <view class="form-item">
                <view>入库时间：</view>
                <view>{{ item.indate }}</view>
              </view>
            </view>
            <view class="flex-je" v-if="checkPermi(['warehousing:page:del'])">
              <view class="button-deep" @click.stop="handleDelete(item.id)"> 删除 </view>
            </view>
          </view>
        </view>
      </scrollList>
    </view>
    <screenModal
      :screenType="1"
      ref="screenModal"
      @setScreenForm="setScreenForm"
	  :setEnterpriseTypeOptions="setEnterpriseTypeOptions"
      :settlementStatusOptions="settlementStatusOptions"
    ></screenModal>
    <tabbar :tabIndex="1"></tabbar>
  </view>
</template>
<script>
import { getReceiptList ,deleteReceiptDoc} from "@/api/warehousing.js";
import screenModal from "@/components/pageLayout/screenModal/screenModal.vue";
import tabbar from "@/components/tabbar/index.vue";
export default {
  components: {
    screenModal,
    tabbar,
  },
  data() {
    return {
      showSearch: false,
      listParams: {
        pageNum: 1,
        pageSize: 10,
        receiptDocNo: null,
      },
      list: [],
      loadComplete: true,
	  
	  setEnterpriseTypeOptions:[],
      settlementStatusOptions: [],
    };
  },
  onShow() {
    uni.hideTabBar();
	if (uni.getStorageSync('token')){
		this.$store.dispatch("actionGetUserInfo");
	}
	this.listParams.receiptDocNo = '';
    this.switchSearch(false);
    this.listParams.pageNum = 1;
    this.getList();
    this.getData();
  },
  methods: {
    switchSearch(value) {
      this.showSearch = value;
    },
	searchList(){
		this.listParams.pageNum == 1
		this.getList()
	},
	searchClear(){
		this.listParams.receiptDocNo = ''
		this.listParams.pageNum = 1
		this.getList()
	},
    async getData() {
		// getDictionaryName(settlementStatusOptions,item.errorStatus)
		// 单位类型  enterprise_type
		this.setEnterpriseTypeOptions = await this.getDictionaryData(
		  "enterprise_type"
		);
		// 对比 状态
      this.settlementStatusOptions = await this.getDictionaryData(
        "contrast_type"
      );
    },
    getList() {
        getReceiptList(this.listParams).then((res) => {
          this.$refs.scrollList.pullUpDone(!1);
          if (this.listParams.pageNum == 1) {
            this.list = res.data.records;
            this.loadComplete = !0;
          } else {
            if (this.list.length == res.data.total) {
              this.$refs.scrollList.pullUpDone(!0);
            } else {
              this.list = [...this.list, ...res.data.records];
            }
          }
        });
    },
    pullUpLoad() {
      this.listParams.pageNum++;
      this.getList();
    },
    showScreenModal() {
      this.$refs.screenModal.showModal();
    },
    setScreenForm(form) {
      this.listParams = {
        ...this.listParams,
        ...form,
      };
      this.listParams.pageNum = 1;
      this.getList();
    },
	
	handleDelete(id){		
		deleteReceiptDoc(id).then(() => {
		  this.searchList();
		  uni.$u.toast("已删除");
		})
	}
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .order-list {
    padding: 0 30rpx;
  }
  .item-info {
    margin-bottom: 30px;
    padding: 20rpx 30rpx 30rpx 30rpx;
    background: #fff;
    border-radius: 12rpx;
    .button-deep {
      border-radius: 200rpx;
      padding: 16rpx 0;
      margin: 20rpx 0 0 20rpx;
      width: 171rpx;
      text-align: center;
      background: linear-gradient(83deg, #48b453 0%, #2c9f79 100%);
      color: #ffffff;
    }
    .item-title {
      padding-bottom: 20rpx;
      view:nth-child(1) {
        font-size: 30rpx;
        color: #000000;
      }
      view:nth-child(2) {
        font-size: 28rpx;
      }
    }

    .form {
      padding: 30rpx 0;
      .form-type {
        font-size: 32rpx;
        color: #000000;
      }
      .form-item {
        display: flex;
        font-size: 30rpx;
        padding-top: 16rpx;
        view:nth-child(2) {
          color: #000;
        }
      }
    }
  }
  .search-block {
    border-top: 1rpx solid #eeeeee;
    padding: 32rpx;
    background: #f7f7f7;

    .search-input {
      height: 58rpx;
      background: #ffffff;
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #cccccc;
      padding: 0 20rpx;
    }

    .screen-icon {
      width: 50rpx;
      height: 50rpx;
      margin-left: 24rpx;
    }
  }

  &-main {
    position: relative;
    flex: 1;
    overflow: hidden;

    .list-block {
      padding: 0 32rpx;
    }
  }
}
</style>
